import { formatNumber, messages } from "share/common";
import React from "react";
import moment from "moment";

const pageIcon = {
  pageIcons: {
    vertical: [
      "M904.533333 584.5333330000001c-17.066667 17.066667-42.666667 17.066667-59.733333 0L512 251.73333300000002 179.2 584.5333330000001c-17.066667 17.066667-42.666667 17.066667-59.733333 0-17.066667-17.066667-17.066667-42.666667 0-59.733333l362.666666-362.666667c8.533333-8.533333 19.2-12.8 29.866667-12.8s21.333333 4.266667 29.866667 12.8l362.666666 362.666667c17.066667 17.066667 17.066667 42.666667 0 59.733333z",
      "M904.533333 221.866667l-362.666666 362.666666c-17.066667 17.066667-42.666667 17.066667-59.733334 0l-362.666666-362.666666c-17.066667-17.066667-17.066667-42.666667 0-59.733334 17.066667-17.066667 42.666667-17.066667 59.733333 0L512 494.933333l332.8-332.8c8.533333-8.533333 19.2-12.8 29.866667-12.8s21.333333 4.266667 29.866666 12.8c17.066667 17.066667 17.066667 42.666667 0 59.733334z",
    ],
    horizontal: [
      "M384 384L731.733333 693.333333c17.066667 14.933333 19.2 42.666667 4.266667 59.733334-14.933333 17.066667-42.666667 19.2-59.733333 4.266666l-384-341.333333c-10.666667-8.533333-14.933333-19.2-14.933334-32s4.266667-23.466667 14.933334-32l384-341.333333c8.533333-6.4 19.2-10.666667 27.733333-10.666667 12.8 0 23.466667 4.266667 32 14.933333 14.933333 17.066667 14.933333 44.8-4.266667 59.733334L384 384z",
      "M731.733333 416l-384 341.333333c-17.066667 14.933333-44.8 14.933333-59.733333-4.266666-14.933333-17.066667-14.933333-44.8 4.266667-59.733334L640 384 292.266667 74.666667c-17.066667-14.933333-19.2-42.666667-4.266667-59.733334 8.533333-8.533333 19.2-14.933333 32-14.933333 10.666667 0 19.2 4.266667 27.733333 10.666667l384 341.333333c8.533333 8.533333 14.933333 19.2 14.933334 32s-4.266667 23.466667-14.933334 32z",
    ],
  },
  pageIconSize: 12,
  pageIconColor: "#1F70FC",
  pageTextStyle: {
    fontSize: 12,
  },
};

export const LINEAR_COLOR_LIST = [
  {
    start: "rgba(31,112,252,0.30)",
    end: "rgba(75,141,255,0.00)",
  },
  {
    start: "rgba(136,225,255,0.30)",
    end: "rgba(80,192,255,0.00)",
  },
  {
    start: "rgba(255,184,102,0.30)",
    end: "rgba(255,184,102,0.00)",
  },
  {
    start: "rgba(136,255,200,0.30)",
    end: "rgba(80,255,124,0.00)",
  },
  {
    start: "rgba(255,110,171,0.30)",
    end: "rgba(255,110,171,0.00)",
  },
];

const COLOR_LIST_HOME = ["#4B8DFF", "#1CAEFF", "#FFD873", "#32CD91"];

const COLOR_LIST_HOME_HOVER = ["#7EAEFF", "#E6F6FF", "#FFF7DC", "#E3FFF4"];

const COLOR_LIST = ["#4B8DFF", "#50C0FF", "#FFC80A", "#32CD91"];

function createBarOptions(data, config) {
  const legendData = data.map((item) => item.name);
  const xAxisData = Object.keys(data[0].main).map((item) => {
    return Number(item.split("-")[1]);
  });
  const seriesData = data.map((item, index) => {
    return {
      name: item.name,
      type: "bar",
      barWidth: "10%",
      barGap: "50%",
      data: Object.keys(item.main).map((key) => {
        return {
          value: item.main[key],
          subValue: item.sub[key],
          name: item.name,
          yearName: messages("basic-1.key297", {
            arg1: moment(key).format("YYYY"),
            arg2: moment(key).format("MM"),
          }) /*{arg1}年{arg2}月*/,
          valueName: messages("basic-1.key279", {
            arg1: `<span class="value-text">${item.main[key]}</span>`,
          }) /*提单量：{arg1}*/,
          subValueName: messages("basic-1.key280", {
            arg1: `<span class="value-text">${item.sub[key]}</span>`,
          }) /*结单量：{arg1}*/,
        };
      }),
      itemStyle: {
        barBorderRadius: [9999, 9999, 0, 0],
      },
      label: {
        normal: {
          show: false,
        },
      },
      // emphasis: { itemStyle: { color: COLOR_LIST_HOME_HOVER[index % 4] } },
    };
  });
  return {
    legend: {
      itemGap: 32,
      type: "scroll",
      ...pageIcon,
      bottom: 0,
      left: "center",
      data: legendData,
      textStyle: {
        color: "#4E5B71",
      },
    },
    tooltip: {
      appendToBody: true,
      extraCssText: "box-shadow: 0 4px 12px 0 rgba(0,0,0,0.10);",
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        fontSize: 10,
        color: "#4E5B71",
      },
      backgroundColor: "#FFF",
      padding: 12,
      formatter: (item) => {
        const year = item[0].data.yearName;
        return `<div class="main-charts-tooltip-bar"><div class="year-title">${year}</div>${item
          .map((single) => {
            return `<div class="single-dimension">
<div class="title-and-dot"><div class="dot" style="background: ${single.color};}"></div><span class="dimension-title">${single.name}</span></div>
<div class="value-box"><div class="single-value">${single.data.valueName}</div><div class="single-value">${single.data.subValueName}</div></div>
</div>`;
          })
          .join("")}</div>`;
      },
    },
    grid: {
      top: "30px",
      left: "3%",
      right: "4%",
      bottom: "30px",
      containLabel: true,
    },
    xAxis: [
      {
        data: xAxisData,
        inverse: false,
        axisLine: {
          lineStyle: {
            color: "#DBE6F3",
          },
        },
        axisTick: {
          show: false,
        },
        axisPointer: {
          shadowStyle: {
            color: "rgba(31,112,252,0.1)",
          },
        },
        axisLabel: {
          interval: 0,
          fontSize: 10,
        },
      },
    ],
    yAxis: [
      {
        name: messages("basic-1.key234") /*单量(张)*/,
        nameTextStyle: {
          align: "left",
          color: "#b5c0ce",
        },
        type: "value",
        boundaryGap: ["0", "15%"], // 右侧留白用于显示label
        splitLine: {
          lineStyle: {
            type: "dashed",
            color: "#EBF0F5",
          },
        },
        axisLine: {
          lineStyle: {
            color: "#DBE6F3",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          // rotate: 45,
          margin: 10,
          color: "#B5C0CE",
          fontSize: 12,
        },
      },
    ],
    series: seriesData,
    color: COLOR_LIST,
  };
}

function createAreaOptions(data, config) {
  const { first, yName } = config;
  const legendData = data.map((item) => item.name);
  const xAxisData = Object.keys(data[0].main).map((item) => {
    return Number(item.split("-")[1]);
  });
  const seriesData = data.map((item, index) => {
    return {
      name: item.name,
      showSymbol: false,
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: first ? LINEAR_COLOR_LIST[index % 2].start : LINEAR_COLOR_LIST.slice(2, 4)[index % 2].start, // 0% 处的颜色
            },
            {
              offset: 1,
              color: first ? LINEAR_COLOR_LIST[index % 2].end : LINEAR_COLOR_LIST.slice(2, 4)[index % 2].end, // 100% 处的颜色
            },
          ],
          global: false,
        },
      },
      // stack: "add",
      // smooth: 0.4,
      // smoothMonotone: "x",
      type: "line",
      label: {
        show: false,
      },
      data: Object.keys(item.main).map((key) => {
        return {
          value: item.main[key],
          subValue: item.sub[key],
          valueName: messages("basic-1.key281", {
            arg1: `<span class="value-text">${item.main[key]}</span>`,
          }) /*出票：{arg1}*/,
          subValueName: messages("basic-1.key282", {
            arg1: `<span class="value-text">${item.sub[key] || "-"}</span>`,
          }) /*主要供应商：{arg1}*/,
          name: item.name,
          yearName: messages("basic-1.key297", {
            arg1: moment(key).format("YYYY"),
            arg2: moment(key).format("MM"),
          }) /*{arg1}年{arg2}月*/,
        };
      }),
    };
  });
  return {
    legend: {
      itemGap: 32,
      type: "scroll",
      ...pageIcon,
      bottom: 0,
      left: "center",
      data: legendData,
    },
    tooltip: {
      appendToBody: true,
      extraCssText: "box-shadow: 0 4px 12px 0 rgba(0,0,0,0.10);",
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(31,112,252,0.5)",
          width: 1,
          type: "dashed",
        },
      },
      textStyle: {
        fontSize: 10,
        color: "#4E5B71",
      },
      backgroundColor: "#FFF",
      padding: 12,
      formatter: (item) => {
        const year = item[0].data.yearName;
        return `<div class="main-charts-tooltip-bar"><div class="year-title">${year}</div>${item
          .map((single) => {
            return `<div class="single-dimension">
<div class="title-and-dot"><div class="dot-circle" style="background: ${single.color};}"></div><span class="dimension-title">${single.name}</span></div>
<div class="value-box"><div class="single-value">${single.data.valueName}</div><div class="single-value">${single.data.subValueName}</div></div>
</div>`;
          })
          .join("")}</div>`;
      },
    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "35px",
      top: "30px",
      containLabel: true,
    },
    xAxis: {
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: "#DBE6F3",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#6C788C",
        fontSize: 12,
      },
    },
    yAxis: {
      name: yName,
      nameTextStyle: {
        align: "left",
        color: "#b5c0ce",
      },
      type: "value",
      boundaryGap: ["0", "5%"], // 顶部留白
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#EBF0F5",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#DBE6F3",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        interval: 0,
        margin: 10,
        color: "#B5C0CE",
        fontSize: 12,
      },
    },
    series: seriesData,
    color: first ? COLOR_LIST.slice(0, 2) : COLOR_LIST.slice(2, 4),
  };
}

function createLineOptions(data, config) {
  const { color, barColor, name } = config;
  const seriesData = Object.keys(data).map((key) => {
    return {
      value: data[key],
      name: name,
      yearName: key,
      valueName: messages("basic-1.key235", { arg1: data[key] }) /*使用量：{arg1}次*/,
    };
  });
  const xAxisData = Object.keys(data).map((item) => Number(item.split("-")[1]));
  return {
    legend: {
      show: false,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "line",
        lineStyle: {
          color: "rgba(31,112,252,0.5)",
          width: 1,
          type: "dashed",
        },
      },
      textStyle: {
        fontSize: 10,
        color: "#FFF",
      },
      padding: [4, 6],
      backgroundColor: "rgba(0,0,0,0.7)",
      formatter: (item) => {
        return `${item[0].data.yearName}<br/>${item[0].data.name}<br/>${item[0].data.valueName}`;
      },
    },
    grid: {
      left: "10px",
      right: "20px",
      bottom: "0px",
      top: "0px",
      containLabel: true,
    },
    xAxis: {
      interval: 0,
      boundaryGap: false,
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: "#DBE6F3",
        },
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: "#6C788C",
        fontSize: 12,
      },
    },
    yAxis: {
      type: "value",
      boundaryGap: ["0", "5%"], // 顶部留白
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "#EBF0F5",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        showSymbol: false,
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: barColor,
            global: false,
          },
        },
        // stack: "add",
        smooth: 0.4,
        smoothMonotone: "x",
        type: "line",
        label: { show: false, position: "top" },
        data: seriesData,
        name: name,
      },
    ],
    color: color,
  };
}

function createPieOptions(data) {
  const { canUse, used } = data;
  const usedName = messages("basic-1.key283", { arg1: used }); /*对接账户(个),{arg1}*/
  const canUseName = messages("basic-1.key284", { arg1: canUse }); /*可用余量(个),{arg1}*/
  return {
    tooltip: {
      show: false,
    },
    legend: {
      show: true,
      data: [
        {
          name: usedName,
          icon:
            "path://M8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,3.581722 12.418278,0 8,0 Z M8,3.2 C10.6509668,3.2 12.8,5.3490332 12.8,8 C12.8,10.6509668 10.6509668,12.8 8,12.8 C5.3490332,12.8 3.2,10.6509668 3.2,8 C3.2,5.3490332 5.3490332,3.2 8,3.2 Z",
        },
        {
          name: canUseName,
          icon:
            "path://M8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C12.418278,16 16,12.418278 16,8 C16,3.581722 12.418278,0 8,0 Z M8,3.2 C10.6509668,3.2 12.8,5.3490332 12.8,8 C12.8,10.6509668 10.6509668,12.8 8,12.8 C5.3490332,12.8 3.2,10.6509668 3.2,8 C3.2,5.3490332 5.3490332,3.2 8,3.2 Z",
        },
      ],
      right: "10%",
      bottom: "center",
      orient: "vertical",
      itemGap: 20,
      formatter: (data) => {
        return `${data.split(",")[0]}：${data.split(",")[1]}`;
      },
    },
    grid: {
      left: "1%",
      right: "1%",
      bottom: "0%",
      top: "1%",
      containLabel: true,
    },
    series: [
      {
        center: ["28%", "50%"],
        name: usedName,
        type: "pie",
        radius: ["66%", "70%"],
        selectedOffset: 5,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: used,
            selected: true,
            itemStyle: {
              color: "#4B8DFF",
            },
            emphasis: {
              itemStyle: {
                color: "#1890FF",
              },
            },
          },
          {
            value: canUse,
            itemStyle: {
              color: "#E8EEF3",
            },
            emphasis: {
              itemStyle: {
                color: "#F1F2F5",
              },
            },
          },
        ],
      },
      {
        center: ["28%", "50%"],
        name: canUseName,
        type: "pie",
        radius: ["45%", "49%"],
        selectedOffset: 5,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: canUse,
            selected: true,
            itemStyle: {
              color: "#FFD873",
            },
            emphasis: {
              itemStyle: {
                color: "#FFD873",
              },
            },
          },
          {
            value: used,
            itemStyle: {
              color: "#E8EEF3",
            },
            emphasis: {
              itemStyle: {
                color: "#F1F2F5",
              },
            },
          },
        ],
      },
    ],
    color: ["#4B8DFF", "#FFD873"],
  };
}

export default {
  //获取卡片上的数据

  createOptions({ data, type, config }) {
    const typeMap = {
      pie: createPieOptions,
      bar: createBarOptions,
      line: createLineOptions,
      area: createAreaOptions,
    };

    const creator = typeMap[type];
    if (creator) {
      return creator(data, config);
    }
  },
};
